<template>
  <div>
    <HelloWorld></HelloWorld>
    <p>Using v-html directive: <span style="color: red">red</span></p>
    <p>Using v-html directive: <span v-html="rawHtml"> </span></p>
    <p>{{ num }}</p>
    <p>double num:{{ doubleNum }}</p>
    <p>watchNum :{{ watchNum }}</p>
    <button @click="num+=1">num+=1</button>
    <p>{{ isMan ? "man" : "women" }}</p>
    <p>{{ [1, 2].join("-") }}</p>
    <a :href="hrefUrl">百度</a>
    <input type="text" v-model="inputValue" @keyup.enter="say('lly')">
    <p v-if="isTrue">if</p>
    <p v-else>else</p>
    <ul>
      <li v-for="item in zsxList" :key="item.name">{{item.name}}</li>
    </ul>
    <button @click="say('zsx')">Say hi</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rawHtml: '<span style="color: blue">blue</span>',
      num: 1,
      isMan: true,
      hrefUrl: "https://baidu.com",
      watchNum: 0,
      inputValue: '',
      isTrue: true,
       list: [
        {name: 'zsx'},
        {name: 'lly'},
        {name: 'gjy'}
      ],
    };
  },
  computed: {
    doubleNum() {
      return this.num * 2;
    },
    zsxList(){
      return this.list.filter(ite =>  ite.name !== 'zsx') 
    }
  },
  watch: {
    num(newVal, oldVal) {
      console.log(newVal, oldVal);
      this.watchNum = newVal;
    },
    inputValue(newVal, oldVal){
      console.log('sou suo', newVal,oldVal)
    }
  },
  methods: {
    say (message) {
      console.log(1, message)
    }
  }
};
</script>

<style scoped>
</style>
